<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>心理测评</el-breadcrumb-item>
    <el-breadcrumb-item>测评分类管理</el-breadcrumb-item>
  </el-breadcrumb>

  <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
    <el-form-item>
      <!-- //搜索功能实现主要是queryInfo封装的好，前端输入框输入的数据恰好可以让queryInfo中有值，然后传递到后端，这里输入框双向数据绑定了 -->
      <el-button type="primary" @click="queryDataList()">搜索</el-button>
      <el-button type="primary" @click="add()"> 新增测评 </el-button>
      <el-button type="danger" @click="batchRemove()">批量删除</el-button>
    </el-form-item>

    <el-table ref="multipleTableRef" :data="dataList" row-key="id" style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column fixed="left" type="selection" width="55" />
      <el-table-column fixed="left" property="id" label="ID" width="60" />
      <el-table-column property="classifyName" label="分类名" />
      <el-table-column property="briefImageUrl" label="封面图">
        <template #default="scope">
          <el-avatar shape="square" size="large" :src="scope.row.listView"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button type="primary" @click="edit(scope.row)" size="small">
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>


  <el-pagination
      v-model:current-page="queryInfo.pageNum"
      v-model:page-size="queryInfo.pageSize"
      :page-sizes="[3, 5, 10]"
      size="default"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNumber"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />

  <el-dialog :title="title" v-model="dialogVisible" width="950" @close="cancle()">
    <el-form :model="evaluationData" label-width="100">
      <el-form-item label="分类名">
        <el-input v-model="evaluationData.classifyName" autocomplete="off" placeholder="请输入分类名"></el-input>
      </el-form-item>
      <el-form-item label="测评封面图">
        <el-upload>
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancle()">取 消</el-button>
        <el-button type="primary" @click="confirm()">
          确 定
        </el-button>
      </div>
    </template>
  </el-dialog>



</template>

<script lang='ts' setup>
import {
  ElMessage,
  ElMessageBox
} from 'element-plus';
import {
  reactive,
  ref,
  getCurrentInstance,
  onMounted
} from 'vue';
import {
  Plus
} from '@element-plus/icons-vue'
import type {
  UploadProps,
  UploadUserFile
} from 'element-plus'

//查询信息对象，在payload看
const queryInfo = reactive({
  briefImageUrl:'',
  pageNum: 1,
  pageSize: 10,
  classifyName: ''
});
const totalNumber = ref(0);
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val.map((item) => {
    return item.id;
  });
};
const handleSizeChange = (val: number) => {
  queryDataList();
}
const handleCurrentChange = (val: number) => {
  queryDataList();
}
//当前页的数据
const dataList = ref([]);
const axios = getCurrentInstance().appContext.config.globalProperties.axios;
const queryDataList = () => {
  axios.get('mindTestClassify/page', {
    params: queryInfo
  }).then((resp) => {
    if ("resp.code == 200") {
      dataList.value = resp.list;
      totalNumber.value = resp.total;
    } else {
      ElMessage.error('查询失败');
    }
    console.log(resp);
  })
}
// 动态标题
const title = ref('新增咨询师');
// 控制对话框是否显示
const dialogVisible = ref(false);

// 新增和修改数据集
const evaluationData = ref({
  classifyName: "",
  briefImageUrl: "",
  id:''
})
const cancle = () => {
  console.log('你点击了取消按钮');
  evaluationData.value = {
    classifyName: "",
    briefImageUrl: "",
    id:''
  }
  dialogVisible.value = false;
}
const confirm = () => {
  if (evaluationData.value.id) {
    axios.put('mindTestClassify', evaluationData.value)
        .then((resp) => {
          if ("resp.code == 200") {

            ElMessage({
              message: '修改成功'

            })
          } else {
            ElMessage.error('修改失败')
          }
          queryDataList()
          dialogVisible.value = false
        })

  } else {
    axios.post('mindTestClassify', evaluationData.value)
        .then((resp) => {
          if ("resp.code == 200") {
            ElMessage({
              message: '新增成功'

            })
          } else {
            ElMessage.error('新增失败')
          }
          queryDataList()
          dialogVisible.value = false
        })
  }


}
const add = () => {
  title.value = '新增分类';
  dialogVisible.value = true;
}
const edit = (row) => {
  title.value = "编辑测评";
  dialogVisible.value = true;
  row.evaluationClassifyId = row.evaluationClassifyId + "";

  evaluationData.value = row;
  // console.log(row);//这样输出的是编辑的那一行的数据
}
const remove = (id) => {
  // console.log(id);
  ElMessageBox.confirm(
      '此操作将永久删除，是否继续?',
      '提示', {
        confirmButtonText: '继续删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.delete(`mindTestClassify/${id}`,{
          params: { id: id } // 明确传递名为"id"的请求参数
        })
            .then((resp) => {
              if ("resp.code == 200") {
                ElMessage.success('删除成功')

              } else {
                ElMessage.error('删除失败')
                queryDataList()
              }
            })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

}
const batchRemove = () => {
  ElMessageBox.confirm(
      '此操作将永久删除，是否继续?',
      '提示', {
        confirmButtonText: '继续删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.delete('mindTestClassify/', {
          params: {
            ids: multipleSelection.value.join(',')
          }
        })
            .then((resp) => {
              if ("resp.code == 200") {
                ElMessage.success('删除成功')

              } else {
                ElMessage.error('删除失败')
                queryDataList()
              }
            })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

}




onMounted(() => {
  queryDataList();
})
</script>

<style>
.el-breadcrumb {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 20px;
}

.el-form {

  padding: 15px;
}
</style>